<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 导入重置样式表 -->
    <link rel="stylesheet" href="../CSS重置样式表.html/1.CSS">
    <!-- 导入tool文件 -->
    <title>Document</title>
    <style>
        /* 设置整个盒子的样式 */
        .outer{
            position: relative;
            width: 400px;
            height: 400px;
            /* 设置边框颜色 */
            background-color: orange;
            margin: 200px auto;
            /* 溢出的内容裁减掉 */
            overflow: hidden;
        }
        ul{
            position: absolute;
            width: 2000px;
            height: 380px;
        }
        li{
            float: left;
        }
        /* 设置图片的样式 */
        img{
            /* width: 380px; */
            height: 380px;
            margin: 10px;
        }
        /* 设置小方块的位置 */
        .lead{
            position: absolute;
            z-index: 5;
            bottom: 17px;
            left: 15px;
        }
        /* 设置小方块的样式 */
        a{
            float: left;
            width: 15px;
            height: 15px;
            background-color: red;
            opacity: .5;
            margin-right: 10px;
        }
        /* 设置鼠标移入小方块的效果 */
        a:hover{
            background-color: black;
        }
    </style>
    <!-- 引入外部js文件 -->
    <script src="./tool.js"></script>
    <script>
        window.onload = function(){
            var outer = document.getElementsByClassName("outer")[0];
            var ul = document.getElementById("ul");
            // 获取图片的数量
            var arry = document.getElementsByTagName("img");
            var w = arry.length*400; 
            // 设置ul的宽度
            ul.style.width = w+"px";

            // 设置小方块水平居中
            var lead = document.getElementsByClassName("lead")[0];
            // 获取所有的超链接
            var a = document.getElementsByTagName("a");
            var lf = (outer.offsetWidth - lead.offsetWidth + 10)/2;
            lead.style.left = lf+"px";

            // 设置鼠标默认选中的方块
            var index = 0;
            a[0].style.backgroundColor = "black";


            // 点击超链接切换相应图片
            // 给超链接绑定单击响应函数
            for (var i = 0; i < a.length; i++){
                // 关闭自动切换的功能
                clearInterval(time);
                // 页面会先执行for循环
                // 设置num属性来保存索引
                a[i].num = i;
                a[i].onclick = function(){
                    index = this.num;
                    // 切换图片
                    move(ul, 20, -400*index, "left");
                    // ul.style.left = (-400*index)+"px";
                    // 修改方块颜色
                    setA();
                    autoChanage();
                }
            }

            // 创建一个方法用来设置方块中的样式
            function setA (){
                // 判断是否是最后一张图片
                if (index >= arry.length-1){
                    // 设置为第一章图片的索引
                    index = 0;
                    // 瞬间回到第一张图片
                    ul.style.left = 0;
                }
                for (var i = 0; i < a.length; i++){
                    // 修改所有方块的颜色
                    a[i].style.backgroundColor = "";
                    // 修改被选中方块的颜色
                    a[index].style.backgroundColor = "black";
                }
            } 

            var time;
            // 创建图片3秒自动切换的函数
            function autoChanage (){
                clearInterval(time);
                // 开启定时器
                time = setInterval(function(){
                    index++;
                    index = index % (arry.length+1);
                    // 修改方块颜色
                    setA();    
                    // 切换图片
                    move(ul, 20, -400*index, "left");
                
                },3000)
            }

            // 调用自动切换图片的函数
            autoChanage();
        }
    </script>
</head>
<body>
    <div class="outer">
        <ul id="ul">
            <li><img src="./img-1.jpg"></li>
            <li><img src="./img-2.jpg"></li>
            <li><img src="./img-3.jpg"></li>
            <li><img src="./img-4.jpg"></li>
            <li><img src="./img-5.jpg"></li>
            <li><img src="./img-1.jpg"></li>
        </ul>
        <!-- 导航小方块 -->
        <div class="lead">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>
    </div>
</body>
</html>